<template>
	<article class="page page-lottery">
		<h4 class="text-center">幸运抽奖</h4>
		<form class="page-body">
			<div class="row">
				<div class="col-3 left">
					<fieldset>
						<legend>参数配置</legend>
						<div class="fieldset-content">
							<div class="form-group">
								<label class="col-form-label">抽奖数量</label>
								<input class="form-control" v-model.trim="lotteryCount" placeholder="请输入中奖人数" />
							</div>
							<div class="form-group form-group-main">
								<label class="col-form-label">抽奖池</label>
								<textarea class="form-control" v-model.trim="lotteryPool" placeholder="请输入参与抽奖者，以“空格、回车、逗号、顿号、句号、感叹号、竖线”分隔均可"></textarea>
							</div>
							<div class="form-group">
								<x-button type="primary" block @click="confirmSettings">确定配置</x-button>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-9 right">
					<fieldset>
						<legend>操作区域</legend>
						<div class="fieldset-content">
							<div class="form-group lottery-pool">
								<div class="alert alert-secondary">
									<button v-for="(v,i) in lotteryPoolList" :key="i"
										type="button"
										:class="['btn', luckerIndexs.includes(i) ? 'btn-warning' : 'btn-secondary']"
									>{{v}}</button>
								</div>
							</div>
							<div class="form-group lottery-luckers">
								<div class="alert alert-info">{{luckers.join(' | ') || '暂无中奖者'}}</div>
							</div>
							<div class="form-group">
								<x-button type="primary" block @click="handle">{{loadingCount > 0 ? '停止' : '开始'}}</x-button>
							</div>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
export default {
	name: 'lottery',
	data () {
		return {
			lotteryCount: 1,
			lotteryPool: '',
			lotteryPoolList: [],
			luckersTotal: 1,
			luckers: [],
			luckerIndexs: [],
			timer: null,
			loadingCount: 0
		}
	},
	beforeDestroy () {
		this.stop()
	},
	methods: {
		resetData () {
			this.loadingCount = 0
			this.lotteryPoolList = []
			this.luckers = []
			this.luckerIndexs = []
		},
		confirmSettings () {
			this.stop()
			this.resetData()
			this.lotteryCount = parseInt(this.lotteryCount) || 1
			this.luckersTotal = this.lotteryCount
			if (!this.lotteryPool) {
				this.$toast('抽奖池不能为空')
				return
			}
			this.lotteryPoolList = this.lotteryPool.split(/[\s,，。！!、|]/).filter(v => !!(v.trim()))
			if (this.lotteryPoolList.length <= this.lotteryCount) {
				this.$toast('抽奖池数量须大于抽奖数量')
				return
			}
		},
		handle () {
			if (this.loadingCount > 0) {
				this.stop()
			} else {
				this.start()
			}
		},
		start () {
			this.timer = setInterval(this.getLuckers, 200)
			this.loadingCount = 1
		},
		stop () {
			clearInterval(this.timer)
			this.timer = null
			this.loadingCount = 0
		},
		getLuckers () {
			this.luckers = []
			this.luckerIndexs = []
			let total = parseInt(this.luckersTotal)
			let max = this.lotteryPoolList.length - 1
			while (total > 0) {
				let index = this.$jstools.random(0, max)
				if (!this.luckerIndexs.includes(index)) {
					this.luckerIndexs.push(index)
					this.luckers.push(this.lotteryPoolList[index])
					total--
				}
			}
		}
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-lottery {
	display: flex;
	flex-direction: column;
	fieldset {
		height: 100%;
		.fieldset-content {
			height: calc(100% - 2em);
			display: flex;
			flex-direction: column;
		}
	}
	.page-body {
		height: 0;
		flex-grow: 1;
		& > .row {
			height: 100%;
		}
		.left {
			.form-group-main {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				textarea {
					flex-grow: 1;
				}
			}
		}
		.right {
			.lottery-pool {
				height: 0;
				flex-grow: 1;
				.alert {
					height: 100%;
					margin-bottom: 0;
					overflow: hidden auto;
					.btn {
						min-width: 4em;
						margin: 0 .25em .5em;
					}
				}
			}
			.lottery-luckers {
				text-align: center;
				.alert {
					min-height: 2em;
					margin-bottom: 0;
				}
			}
		}
	}
}
</style>
